<!DOCTYPE html>
<html>
<head>
<style type="text/css">

	html { height: 100% }
	body { height: 100%; margin: 0px; padding: 0px}
	#top_bar { border-bottom: 1px solid #ddd; background: #fff repeat-x center left; z-index: 99; position: fixed; width: 100%; height: 35px; }
	#wrapper { height: 100%; width: 70%; }
	.map_msg { z-index:-1; height: 100%; width: 30%; position: absolute; top: 0; right: 0; background: #FF6699; overflow-y: scroll }
	.msg_element {
		width: 100%;
		height: 80px;
		margin-bottom: 2px;
	}
	.msg_text {
		height: 100%;
		position: relative;
		overflow: hidden;
		margin-left: 70px;
		padding-left: 6px;
		margin-top: 1px;
	}
	.msg_image {
		margin-top: 2px;
		margin-left: 2px;
		float: left;
		width: 80px;
		height: 100%;
	}
	.msg_image img {
		height: 78px;
	}
	.msg_date {
		position: absolute;
		right: 3px;
		bottom: -2px;
		font-size: 4pt;
	}
	.msg_author {
		z-index: 0;
		position: relative;
		top: 0px;
		left: 0px;
		float: left;
	}
	.msg_content {
		z-index: 1;
	}
	.msg_text:before{
		z-index: -1;
		position: absolute;
		top: 2px;
		left: 0px;
		right: 0px;
		bottom: -2px;
		content: "";

		border-width: 8px 10px 8px 10px; 
		border-image: url(images/speech_bubble_left_2.png) 8 10 8 17 stretch stretch;
		-webkit-border-image: url(images/speech_bubble_left_2.png) 8 10 8 17 stretch stretch;
		-moz-border-image: url(images/sspeech_bubble_left_2.png) 8 10 8 17 stretch stretch;
		-o-border-image: url(images/sspeech_bubble_left_2.png) 8 10 8 17 stretch stretch;
	}
	#map_canvas { height: 80%; width: 100%; background: #f00 }
	.user_canvas {
		position: relative;
		height: 20%;
	       	width: 100%;
	       	background: #FFCC33 
	}
	.user_pic_frame {
	       	width: 100%;
	       	height: 60%;
	       	background-color: #FFCC33
       	} 
	.user_pic {
		height: 100%;
		width: auto;
		background: #ffff00;
	}
	.user_pic img {
		height: 100%;
	}
	.user_msg_frame {
		margin-top: 2px;
		height: 36%;
		width: 100%;
		position: relative;
	}
	.user_msg_text {
		height: 86%;
		width: 89%;
	}
	.user_msg_button {
		position: absolute;
		top: 0px;
		right: 0px;
		height: 100%;
		width: 10%;
	}
	.user_cover {
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		background-color: rgba(200, 00, 200, 0.7); 
	}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var fbId;
var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =  new Boolean();
var map;
var userLong; 
var userLat;
var virLng;
var virLat;
var vMarker;
var userMarker;
var tmp = "{{latlong}}".split(',');
if (tmp.length > 1) {
	userLong = tmp[1];
	userLat = tmp[0];
}
function zoomAnimation() {
	var curZoom = map.getZoom();
	if (curZoom != ENDZOOM) {
		var incrZoom;
		var diff = ENDZOOM - curZoom;
		if (diff > 1)
			incrZoom = 2;
		else if (diff < -1)
			incrZoom = -2;
		else
			incrZoom = diff;
		map.setZoom(curZoom + incrZoom);
		setTimeout("zoomAnimation()", 1000);
	}
}
function initialize() {
	var myMap = document.getElementById("map_canvas");
	var curCenter = "{{latlong}}";
	var res = curCenter.split(",");
	var defaultCenter = newyork;
	if (res.length > 1)
		defaultCenter = new google.maps.LatLng(res[0], res[1]);
	var myOptions = {
zoom: 17,
      mapTypeControl: false,
      scaleControl: false,
      scrollwheel: false,
      rotateControl: false,
      streetViewControl: false,
      panControl: false,
      zoomControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(myMap ,myOptions);
	map.setCenter(defaultCenter);
	google.maps.event.addListener(map, 'center_changed', function(event){
		var content = document.getElementById('content').value;
		$.post('/', {
				'mode': "centerChanged",
				},
				function(responseData) {}
				);
			});
	google.maps.event.addListener(map, 'click', function(event){
		virLat = event.latLng.lat();
		virLng = event.latLng.lng();
		var userPosition = document.getElementById("userPosition_v");
		userPosition.textContent = virLat + "," + virLng;
		if (vMarker) {
			vMarker.setPosition(event.latLng);
		} else {
			var image = 'images/greenman.jpg';
			vMarker = new google.maps.Marker({
				position: event.latLng,
				map: map,
				icon: image,
				title: "here"
			});
		}
		map.panTo(event.latLng);
		});
	{% for marker in msgs %}
	addMarker({{marker.latlong.lat}}, {{marker.latlong.lon}}, "{{marker.content}}", "{{marker.fbId}}");
	{% endfor %}

	// Try W3C Geolocation (Preferred)
	if(navigator.geolocation) {
		browserSupportFlag = true;
		navigator.geolocation.getCurrentPosition(function(position) {
			initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
			userLong = position.coords.longitude;
			userLat = position.coords.latitude;
	var userPosition = document.getElementById("userPosition_p");
	userPosition.textContent = userLat + "," + userLong;
			map.panTo(initialLocation);
			virLng = position.coords.longitude;
			virLat = position.coords.latitude;
			var image = 'images/greendot.jpg';
			userMarker = new google.maps.Marker({
				position: initialLocation,
				map: map,
				icon: image,
				title: "t1130476550esting",
			});
			}, function() {
			handleNoGeolocation(browserSupportFlag);
			});
	} else {
		browserSupportFlag = false;
		handleNoGeolocation(browserSupportFlag);
	}
	var userPosition = document.getElementById("userPosition_p");
	userPosition.textContent = userLat + "," + userLong;
	function handleNoGeolocation(errorFlag) {
		if (errorFlag == true) {
			initialLocation = newyork;
		} else {
			initialLocation = siberia;
		}
		if (userLong && userLat) {
			map.setCenter(new google.maps.LatLng(userLong, userLat));
		} else {
			map.setCenter(defaultCenter);
		}
	}
}
google.maps.event.addDomListener(window, 'load', initialize);
function addMarker(lat, lng, cont, mfbId) {
	var image = 'images/marker_smile.jpg';
	var window = new google.maps.InfoWindow({
			content: cont,
			});
	if (mfbId)
		image = new google.maps.MarkerImage(
			       	"https://graph.facebook.com/"+mfbId+"/picture",
				null,
				null,
				null,
				new google.maps.Size(40, 40)
			);
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(lat, lng),
		map: map,
		icon: image
	});
	google.maps.event.addListener(marker, 'mouseover', function(){
			window.open(map, marker);
			});
	google.maps.event.addListener(marker, 'mouseout', function(){
			window.close();
			});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
	FB.init({
appId      : '530766403709308',
status     : true, // check login status
cookie     : true, // enable cookies to allow the server to access the session
xfbml      : true  // parse XFBML
});

// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below 
// will be handled. 
FB.Event.subscribe('auth.authResponseChange', function(response) {
		// Here we specify what we do with the response anytime this event occurs. 
		if (response.status === 'connected') {
		// The response object is returned with a status field that lets the app know the current
		// login status of the person. In this case, we're handling the situation where they 
		// have logged in to the app.
		testAPI();
		} else if (response.status === 'not_authorized') {
		// In this case, the person is logged into Facebook, but not into the app, so we call
		// FB.login() to prompt them to do so. 
		// In real-life usage, you wouldn't want to immediately prompt someone to login 
		// like this, for two reasons:
		// (1) JavaScript created popup windows are blocked by most browsers unless they 
		// result from direct interaction from people using the app (such as a mouse click)
		// (2) it is a bad experience to be continually prompted to login upon page load.
		FB.login();
		} else {
		// In this case, the person is not logged into Facebook, so we call the login() 
		// function to prompt them to do so. Note that at this stage there is no indication
		// of whether they are logged into the app. If they aren't then they'll see the Login
		// dialog right after they log in to Facebook. 
		// The same caveats as above apply to the FB.login() call here.
			FB.login();
		}
});
};

// Load the SDK asynchronously
(function(d){
 var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js";
 ref.parentNode.insertBefore(js, ref);
 }(document));

// Here we run a very simple test of the Graph API after login is successful. 
// This testAPI() function is only called in those cases. 
function testAPI() {
	console.log('Welcome!  Fetching your information.... ');
	FB.api('/me', function(response) {
			fbId = response.id;
			var imgSrc = "https://graph.facebook.com/"+fbId+"/picture";
			var user_pic = document.getElementById('user_pic');
			user_pic.src = imgSrc;
			if (userMarker)
				userMarker.setIcon(imgSrc);
			console.log('Good to see you, ' + response.name + '.');
			});
	var cover = document.getElementById('user_cover');
	cover.style.display = "none";
}
</script>
<script>
function notifyServer() {
	var content = document.getElementById('content').value;
	$.post('/', {
			'mode': "postMsg",
			'fbId' : fbId,
			'userLong': virLng,
			'userLat': virLat,
			'content': content
			},
			function(responseData) {}
			);
}
</script>
<div id='wrapper'>
	<div id="map_canvas">
	</div>
	<div class="user_canvas">
		<div class="user_pic_frame">
			<div class="user_pic">
				<img id="user_pic" src="images/greenman.jpg"></img>
			</div>
			<b>{{ city }}</b>
			<div id="userPosition_p"></div>
			<div id="userPosition_v"></div>
		</div>
		<div id="user_msg_frame" class="user_msg_frame">
			<textarea class="user_msg_text" id="content"></textarea>
			<input class="user_msg_button" type="button" name="post1" onclick="notifyServer()" value="Post">
		</div>
		<div id="user_cover" class="user_cover">
			<div class="fb-login-button"
			       	data-max-rows="1"
			       	data-size="xlarge"
			       	data-show-faces="true"
			       	data-auto-logout-link="true"
				>
			</div>
		</div>
	</div>
</div>
<div class="map_msg">
	{% for msg in msgs %}
	<div class="msg_element">
		<div class="msg_image">
			{% if msg.fbId %}
				<img src="https://graph.facebook.com/{{msg.fbId}}/picture"></img>
			{% else %}
				<img src="images/greenman.jpg"></img>
			{% endif %}
		</div>
		<div class="msg_text">
			<div class="msg_author">
			{% if msg.author %}
				{{ msg.author.nickname() }}:
			{% else %}
				An anonymous person wrote:
			{% endif %}
			</div>
			<div class="msg_content">{{ msg.content }}</div>
			<div class="msg_date">{{ msg.write_time }}</div>
		</div>
	</div>
	{% endfor %}
</div>
</body>
</html>
